<script lang="ts" setup>
import { useMusicStore } from "@/store"
import Loading from "@/components/Loading.vue" // 加载中组件
import Banners from "./components/Banner.vue" // 轮播图组件
import IconSwiper from "./components/IconSwiper.vue" // 图标列表组件
import LeftPop from "./components/LeftPop.vue" // 抽屉组件
import HomePlaylist from "./components/HomePlaylist.vue" // 歌单列表组件
import { radarApi, personalizedApi } from "@/services" // 推荐歌单接口
import type { PersonalizedItem, radarItem } from "@/services/type"
import { ref } from "vue"
import GuessLike from './components/GuessLike.vue' // 猜你喜欢组件
import PlayerOut from '@/components/PlayerOut.vue'

// #region 引入包, 函数和组件
// import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
const leftPopRef = ref<InstanceType<typeof LeftPop> | null>(null)
// #endregion

// #region // 变量
const playList = ref<PersonalizedItem[]>([])
const playList2 = ref<PersonalizedItem[]>([])
const radarList = ref<radarItem[]>([])
const playList3 = ref<radarItem[]>([])
const playList3_title = ref('')
// #endregion

// #region // 函数
const toSearch = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  })
}
const getPersonalized = async () => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口
    const res = await personalizedApi({ limit: 6 })
    const res2 = await radarApi()

    // 接受数据
    playList.value = res.result
    console.log(res2.data.blocks[3].creatives)

    radarList.value = res2.data.blocks[4].creatives
    playList2.value = radarList.value.map((v) => {
      return {
        id: +v.resources[0].resourceId,
        picUrl: v.resources[0].uiElement.image.imageUrl,
        name: v.resources[0].uiElement.mainTitle.title
      }
    })
    playList3_title.value = res2.data.blocks[3].uiElement.subTitle.title
    playList3.value = res2.data.blocks[3].creatives
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
getPersonalized()
// #endregion
</script>

<template>
  <view class="app">
    <scroll-view :class="['home', { has_player: music.currentIndex + 1 }]" scroll-y>
      <view class="header">
        <image
          @click="leftPopRef?.open()"
          src="/src/static/index/more.png"
          mode="aspectFit"
        ></image>
        <view class="search_box" @click="toSearch">
          <image src="/src/static/index/search.png" mode="aspectFit"></image>
          <view>搜索</view>
        </view>
      </view>
      <Banners></Banners>
      <icon-swiper></icon-swiper>
      <home-playlist
        :list="playList"
        title="推荐歌单"
      ></home-playlist>
      <guess-like :title="playList3_title" :list="playList3"></guess-like>
      <home-playlist
        :list="playList2"
        title="你的雷达歌单"
      ></home-playlist>
    </scroll-view>
    <player-out></player-out>
  </view>
  <left-pop ref="leftPopRef"></left-pop>
  <Loading></Loading>
</template>

<style lang="scss" scoped>
.home {
  height: calc(100vh - var(--window-top) - var(--window-bottom));
}
.has_player {
  height: calc(100vh - var(--window-top) - var(--window-bottom) - 100rpx);
}
.header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  height: 72rpx;
  & > image {
    width: 50rpx;
    height: 50rpx;
    opacity: 0.7;
  }
  .search_box {
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    margin-left: 30rpx;
    border-radius: $uni-border-radius-lg;
    color: $uni-text-color-grey;
    font-size: $uni-font-size-base;
    image {
      width: 46rpx;
      height: 46rpx;
      opacity: 0.4;
      margin-right: 20rpx;
    }
  }
}
</style>
